<template>
<div style="width:100%;height:100%">
    <!-- 横向节点栏 -->
    <div v-if="isCross"></div>
    <div style="display:flex;width:100%;height:100%">
      <!-- 纵向节点栏 -->
      <div v-if="!isCross" style="max-width:200px;width:20%"></div>
      <div style="display:grid;width:100%;height:100%;">
          <div style="display:grid;padding:20px;position: relative;overflow:auto;"
          @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove" id="flowContent"
          >
          <div style="width:100%;height:100%">
              <div style="width:fit-content;height:100%;display:flex;align-items: center;">
                <flowNode @node-click="nodeClick" :data="datax" :isMenu="isMenu" :cutMenu="cutMenu"/>
              </div>
          </div>
          </div>
      </div>
    </div>
</div>
</template>

<script>
import FLOWNODE from './FlowNode.vue'
export default {
  name: 'FlowChart',
  data () {
    return {
      x: 0,
      y: 0,
      top: 0,
      left: 0,
      move: false,
      down: false,
      datax: this.data
    }
  },
  components: {
    flowNode: FLOWNODE
  },
  props: {
    // 树型数据
    data: {
      type: [Array]
    },
    // 是否开启菜单
    isMenu: {
      type: Boolean,
      default: false
    },
    // 自定义菜单
    cutMenu: {
      type: Array
    },
    // 节点栏
    nodes: {
      type: [Array]
    },
    isCross: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'data': {
      handler: function (e, old) {
        this.datax = e
      }
    }
  },
  methods: {
    nodeClick (item, that) {
      this.$emit('on-node-click', item, that)
    },
    mousedown (e) {
      e && e.preventDefault()
      let dom = document.getElementById('flowContent')

      this.move = false
      this.down = true
      this.x = e.clientX
      this.y = e.clientY
      this.top = dom.scrollTop
      this.left = dom.scrollLeft
    },
    mouseup (e) {
      e && e.preventDefault()

      this.move = false
      this.down = false
    },
    mousemove (e) {
      this.move = true
      if (this.down) {
        let x = this.x - e.clientX
        let y = this.y - e.clientY
        let dom = document.getElementById('flowContent')

        dom.scrollLeft = this.left + x
        dom.scrollTop = this.top + y
      }
    }
  },
  created () {}
}
</script>
